<template>
	<div>
		<div class="main-body">
			<h3 class="main-body__title text-left">
				提交审核资料
				<div class="btn-area">
					<button class="btn btn-primary--empty" @click.prevent="back()">放弃</button>
					<button class="btn btn-primary" @click.prevent="submit()">提交</button>
				</div>
			</h3>
			<div class="main-body__content text-left">
				<div class="form form-horizontal">
					<div class="form-group " :class="{'form-group--error':$v.formData.shname.$error}">
						<label class="control-label col-sm-2">商户名称</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.shname" @blur="$v.formData.shname.$touch()"  class="form-control" placeholder="" >
						</div>
					</div>
					<div class="form-group" :class="{'form-group--error':$v.formData.wzname.$error}">
						<label class="control-label col-sm-2">网站名称</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.wzname" @blur="$v.formData.wzname.$touch()" class="form-control" placeholder="" >
						</div>
					</div>
					<div class="form-group" :class="{'form-group--error':$v.formData.domain.$error}">
						<label class="control-label col-sm-2">网站域名</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.domain" @blur="$v.formData.domain.$touch()"  class="form-control" placeholder="" >
						</div>
					</div>
					<div class="form-group" :class="{'form-group--error':$v.formData.icp.$error}">
						<label class="control-label col-sm-2">ICP 备案号</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.icp" @blur="$v.formData.icp.$touch()" class="form-control" placeholder="" >
						</div>
					</div>
					<div class="form-group" :class="{'form-group--error':$v.formData.fridc.$error}">
						<label class="control-label col-sm-2">法人身份证</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.fridc" @blur="$v.formData.fridc.$touch()" class="form-control" placeholder="" >
						</div>
					</div>
					<hr>
					<div class="form-group">
						<label class="control-label col-sm-2">法人身份证正面</label>
						<div class="col-sm-7" style="position:relative">
							<input type="text" class="form-control" placeholder="" >
							<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" class="imgUpload">
						</div>
						<div class="shadow-file">
							<i class="fa fa-cloud-upload fa-lg"></i>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2">法人身份证反面</label>
						<div class="col-sm-7" style="position:relative">
							<input type="text" class="form-control" placeholder="" >
							<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" class="imgUpload">
						</div>
						<div class="shadow-file">
							<i class="fa fa-cloud-upload fa-lg"></i>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2">法人手持身份证</label>
						<div class="col-sm-7" style="position:relative">
							<input type="text" class="form-control" placeholder="" >
							<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" class="imgUpload">
						</div>
						<div class="shadow-file">
							<i class="fa fa-cloud-upload fa-lg"></i>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2">营业执照</label>
						<div class="col-sm-7" style="position:relative">
							<input type="text" class="form-control" placeholder="" >
							<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" class="imgUpload">
						</div>
						<div class="shadow-file">
							<i class="fa fa-cloud-upload fa-lg"></i>
						</div>
					</div>
					<hr>
					<div class="form-group" :class="{'form-group--error':$v.formData.contact_name.$error}">
						<label class="control-label col-sm-2">审核联系人</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.contact_name" @blur="$v.formData.contact_name.$touch()"  class="form-control" placeholder="" >
						</div>
					</div>
					<div class="form-group" :class="{'form-group--error':$v.formData.telephone.$error}">
						<label class="control-label col-sm-2">联系方式</label>
						<div class="col-sm-7">
							<input type="text" v-model="formData.telephone" @blur="$v.formData.telephone.$touch()" class="form-control" placeholder="" >
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>

import { required } from 'vuelidate/lib/validators'

  export default {
    name:'apply-channel',
    data(){
      return {
      	formData:{shname:'',wzname:'',domain:'',icp:'',fridc:'',contact_name:'',telephone:''}
      }
    },
    validations:{
    	formData:{
	    	shname:{required},
	    	wzname:{required},
	    	domain:{required},
	    	icp:{required},
	    	fridc:{required},
	    	contact_name:{required},
	    	telephone:{required}
    	}
    },
    methods:{
    	back(){
    		this.$router.go(-1);
    	},
    	submit(){
    		let that = this;
    		let data = $.extend( true,{},that.formData );
    		let $v = $.extend( true,{},that.$v.formData );

			this.$v.formData.$touch();

    		if( !$v.$invalid ){
				this.$store.dispatch( 'ChangeToastState',{
					sign:true,
					text:'提醒成功'
				} )
				// this.$router.push('application');
				
			}
    	}
    }
  }
</script>
<style scoped lang="less">
	@import '../../assets/style/color';
	@import '../../assets/style/font';

  	.main-body__content{
  		.control-label{
  			font-size:16px;
  			color:@cl_444;
  			padding-top:14px;
  		}
  		.form-group{
  			margin-bottom:33px;
  			position: relative;
  			&.form-group--error{
  				.form-control{
  					border-color:@cl_ff6537;
  				}
  			}
  			.shadow-file{
  				position: absolute;
  				top:15px;
  				left: 44%;
  			}
  			.fa{
  				color:@cl_2b98f0;
  			}
  		}
  		hr{
  			margin:33px 0;
  		}
  		.imgUpload{
  			position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    opacity: 0;
		    z-index:100;
  		}
  	}
</style>